<template>
  <div class="experts-container">
    <!-- 顶部标题区 -->
    <div class="experts-header">
      <div class="header-content">
        <h1>👨‍⚕️ 认识我们的专家团队</h1>
        <p class="header-subtitle">
          MedMOE汇集了多个领域的顶级健康专家，他们的知识来自权威医学机构的专业数据，
          致力于为您提供最可靠、最专业的健康建议。
        </p>
      </div>
      <div class="header-actions">
        <el-button :icon="'ChatDotRound'" type="primary" @click="goToChat">开始咨询</el-button>
        <el-button :icon="'User'" @click="goToProfile">个人中心</el-button>
      </div>
    </div>

    <!-- 专家卡片网格 -->
    <div class="experts-grid" v-loading="loading">
      <div
        v-for="expert in experts"
        :key="expert.id"
        class="expert-card"
        :style="{ borderColor: expert.color }"
      >
        <!-- 卡片头部 -->
        <div class="card-header" :style="{ background: `linear-gradient(135deg, ${expert.color}22, ${expert.color}11)` }">
          <div class="expert-avatar" :style="{ backgroundColor: expert.color }">
            {{ expert.avatar }}
          </div>
          <div class="expert-title-area">
            <h2>{{ expert.name }}</h2>
            <p class="expert-title">{{ expert.title }}</p>
          </div>
        </div>

        <!-- 卡片内容 -->
        <div class="card-body">
          <!-- 擅长领域 -->
          <div class="section">
            <h3>
              <el-icon><Star /></el-icon>
              擅长领域
            </h3>
            <div class="specialty-tags">
              <el-tag
                v-for="specialty in expert.specialty"
                :key="specialty"
                :color="expert.color"
                size="small"
                effect="light"
              >
                {{ specialty }}
              </el-tag>
            </div>
          </div>

          <!-- 专家简介 -->
          <div class="section">
            <h3>
              <el-icon><Document /></el-icon>
              专家简介
            </h3>
            <p class="description">{{ expert.description }}</p>
          </div>

          <!-- 专业背景 -->
          <div class="section">
            <h3>
              <el-icon><Medal /></el-icon>
              专业背景
            </h3>
            <p class="background">{{ expert.background }}</p>
          </div>

          <!-- 知识来源 -->
          <div class="section">
            <h3>
              <el-icon><Reading /></el-icon>
              知识来源
            </h3>
            <div class="data-sources">
              <el-tooltip
                v-for="source in expert.dataSources"
                :key="source.name"
                :content="source.description"
                placement="top"
              >
                <el-tag size="small" type="info" effect="plain">
                  {{ source.name }}
                </el-tag>
              </el-tooltip>
            </div>
            <p class="source-note">
              <el-icon><InfoFilled /></el-icon>
              数据来源均为国际权威医学机构，确保信息的专业性和可靠性
            </p>
          </div>

          <!-- 服务数据 -->
          <div class="section stats-section">
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(expert.consultationCount) }}</div>
              <div class="stat-label">累计咨询</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <div class="stat-value">{{ expert.satisfactionRate }}%</div>
              <div class="stat-label">满意度</div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="card-actions">
            <el-button
              type="primary"
              :style="{ backgroundColor: expert.color, borderColor: expert.color }"
              @click="consultExpert(expert)"
            >
              <el-icon><ChatDotRound /></el-icon>
              立即咨询
            </el-button>
          </div>
        </div>
      </div>

      <el-empty
        v-if="experts.length === 0 && !loading"
        description="暂无专家信息"
        :image-size="120"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getExperts } from '@/api/expert';
import type { ExpertInfo } from '@/types/expert';

const router = useRouter();

const loading = ref(false);
const experts = ref<ExpertInfo[]>([]);

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w';
  }
  return num.toLocaleString();
};

// 加载专家信息
const loadExperts = async () => {
  loading.value = true;
  try {
    const response = await getExperts();
    if (response.code === 200) {
      experts.value = response.data.experts;
    }
  } catch (error) {
    ElMessage.error('加载专家信息失败');
  } finally {
    loading.value = false;
  }
};

// 咨询专家
const consultExpert = (expert: ExpertInfo) => {
  ElMessage.success(`即将为您连接${expert.name}`);
  router.push('/chat');
};

// 跳转到对话页面
const goToChat = () => {
  router.push('/chat');
};

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile');
};

// 初始化
onMounted(() => {
  loadExperts();
});
</script>

<style scoped lang="scss">
.experts-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 20px;
}

.experts-header {
  background: white;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .header-content {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 16px 0;
      font-size: 32px;
      font-weight: 700;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .header-subtitle {
      margin: 0;
      font-size: 16px;
      color: #606266;
      line-height: 1.8;
      max-width: 800px;
    }
  }

  .header-actions {
    display: flex;
    gap: 12px;
  }
}

.experts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
}

.expert-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }

  .card-header {
    padding: 32px 24px 24px;
    display: flex;
    align-items: center;
    gap: 20px;

    .expert-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .expert-title-area {
      flex: 1;

      h2 {
        margin: 0 0 8px 0;
        font-size: 22px;
        font-weight: 600;
        color: #303133;
      }

      .expert-title {
        margin: 0;
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .card-body {
    padding: 0 24px 24px;

    .section {
      margin-bottom: 20px;

      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px 0;
        font-size: 15px;
        font-weight: 600;
        color: #606266;
      }

      .specialty-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .description,
      .background {
        margin: 0;
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
      }

      .data-sources {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
      }

      .source-note {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 12px;
        color: #909399;
        padding: 8px 12px;
        background: #f5f7fa;
        border-radius: 6px;
      }
    }

    .stats-section {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 16px 0;
      background: #f9fafb;
      border-radius: 8px;

      .stat-item {
        text-align: center;

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #409eff;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 13px;
          color: #909399;
        }
      }

      .stat-divider {
        width: 1px;
        height: 40px;
        background: #dcdfe6;
      }
    }

    .card-actions {
      margin-top: 20px;

      .el-button {
        width: 100%;
        height: 44px;
        font-size: 15px;
        font-weight: 600;
      }
    }
  }
}

@media (max-width: 1200px) {
  .experts-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .experts-container {
    padding: 12px;
  }

  .experts-header {
    padding: 24px;

    .header-content h1 {
      font-size: 24px;
    }

    .header-actions {
      flex-wrap: wrap;
    }
  }

  .experts-grid {
    grid-template-columns: 1fr;
  }
}
</style>